<template>
	<div class="content55 page-main-content">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">Financiación</div>
		</header>
		<div class="box">
			<div class="top-input" v-show="data.min_loan">
				<div class="code">{{initData.currency}}</div>
				<div class="input">
					<input type="text" :placeholder="'Importe mínimo de financiación' +  data.min_loan"
						oninput="value=value.replace(/[^\d.]/g,'').replace(/(\d{0,}\.\d{0,2}).*/,'$1');"
						v-model="money">
				</div>
				<div class="max right50" @click="max">Financiación total</div>
			</div>
			<div class="tip">Financiación máxima {{initData.currency}}{{data.max_loan}} </div>
		</div>

		<div class="box2">
			<div class="title">Período de financiación</div>
			<ul class="type-list">
				<li v-for="(item, index) in types" :key="index" :class="{ active: activeIndex === index }"
					@click="selectType(index)">
					{{ item }}Mes
				</li>
			</ul>
			<div class="title">Contrato detallado de financiación</div>
			<div v-if="money">
				<div class="flex-row">
					<div class="left">Importe de la financiación</div>
					<div class="right">{{initData.currency}}{{ money }} </div>
				</div>
				<div class="flex-row">
					<div class="left">Llegada real</div>
					<div class="right">{{initData.currency}}{{ money }} </div>
				</div>
				<div class="flex-row">
					<div class="left">Intereses completos</div>
					<div class="right">{{initData.currency}}{{ totalInterest }} </div>
				</div>
				<div class="flex-row">
					<div class="left">Intereses mensuales</div>
					<div class="right"> {{initData.currency}}{{ monthlyInterest }}</div>
				</div>
			</div>

			<div class="flex-row">
				<div class="left">Día de inicio</div>
				<div class="right">{{ startDate }}</div>
			</div>
			<div class="flex-row">
				<div class="left">Fecha final</div>
				<div class="right">{{ endDate }}</div>
			</div>
			<div class="flex-row">
				<div class="left">Regreso a zairi</div>
				<div class="right">{{ repaymentDate }}</div>
			</div>
			<div class="tip">
				<div class="check" :class="{ 'active': agreed }" @click="toggleAgreement">
					<img src="/img/check.png" alt="" srcset="" />
				</div>
				Contrato de consentimiento <router-link
					:to="{ path: '/index/aggrement', query: { amount: money, months: types[activeIndex], rate:(parseFloat(data.rate)* 100).toFixed(2) }}">《Contrato de financiación》</router-link>
			</div>
		</div>
		<router-link class="topup" :to="{ path: '/index/esign', query: { amount: money, months: types[activeIndex]}}" style="display: block;">Solicitar un préstamo</router-link>

	</div>
</template>


<script>
	import AJAX from '@/utils/http';
	export default {
		data() {
			return {
				types: [1, 3, 6, 12, 18, 24, 36, 42, 48, 52, 58, 64], // 分类列表
				activeIndex: 0,
				data: {},
				money: '',
				agreed: true,
				initData:{},
			};
		},
		created() {
			this.fetchData();
			this.init();
		},
		computed: {
			totalInterest() {
				// 计算总利息
				return (parseFloat(this.money) * this.data.rate * this.types[this.activeIndex]).toFixed(2);
			},
			monthlyInterest() {
				// 计算月利息
				return this.data.rate * parseFloat(this.money);
			},
			startDate() {
				// 计算开始日期
				const today = new Date();
				return today.toLocaleDateString();
			},
			endDate() {
				// 计算结束日期
				const selectedMonths = this.types[this.activeIndex];
				const endDate = new Date();
				endDate.setMonth(endDate.getMonth() + selectedMonths);
				return endDate.toLocaleDateString();
			},
			repaymentDate() {
				// 计算返款日期
				const today = new Date();
				const repaymentDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
				return repaymentDate.toLocaleDateString();
			},
		},
		methods: {
			fetchData() {
				AJAX.post('/index/loan', {}, {
					showLoading: false
				}).then(e => {
					this.data = e.data;
					this.data.rate = parseFloat(this.data.rate / 100).toFixed(4);
					this.money = e.data.min_loan
				});
			},
			selectType(index) {
				this.activeIndex = index; // 更新当前活动选项的索引
			},
			max() {
				this.money = this.data.max_loan; // 更新当前活动选项的索引
			},
			toggleAgreement() {
				this.agreed = !this.agreed; // 切换同意状态
			},
			init(){
				AJAX.post('/index/init', {}, {
					showLoading: false
				}).then(e => {
					this.initData = e.data;	
				});
			},
		}
	};
</script>

<style scoped>
	.topup {
		margin: 12px;
	}

	.box2 .tip {
		display: flex;
		font-size: 14px;
		font-weight: 600;
		align-items: center;
		margin-top: 12px;
	}

	.box2 .tip .check {
		border: 1px solid #ebebeb;
		height: 16px;
		width: 16px;
		margin-right: 4px;
		border-radius: 4px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.box2 .tip a {
		color: var(--system-color);
		text-decoration: underline;
		/* 添加下横线 */

	}

	.box2 .tip .check.active {
		background: var(--system-color);
	}


	.box2 .tip .check img {
		width: 80%;
		height: 80%;
		display: none;
	}

	.box2 .tip .check.active img {
		display: block;
	}

	.flex-row .left {
		font-size: 14px;
		color: #999;
		margin-bottom: 8px;
	}

	.flex-row .right {
		font-size: 14px;
		color: #333;
	}

	.box2 .title {
		font-size: 14px;
		margin: 12px 0;
		font-weight: 600;
	}

	.type-list {
		display: flex;
		gap: 8px;
		margin-top: 8px;
		flex-wrap: wrap;
		padding-bottom: 12px;
		border-bottom: 1px solid #ebebeb;
	}

	.type-list li {
		flex-basis: calc(25% - (8px * 3));
		padding: 8px 4px;
		background: #ebebeb;
		border-radius: 4px;
		transition: all .3s ease-in-out;
		font-size: 11px;
		min-width: 20vw;
		text-align: center;
	}

	.type-list li.active {
		color: #fff;
		background: var(--system-color);
	}

	.box,
	.box2 {
		background-color: #fff;
		border-radius: 4px;
		margin-bottom: 15px;
		margin: 12px;
		border: 1px solid #ebebeb;
		padding: 12px;
		padding-top: 24px;
	}

	.box2 {
		padding-top: 12px;
	}

	.box .top-input {
		display: flex;
		align-items: center;
		height: 32px;
		position: relative;
	}

	.box .top-input .code {
		font-size: 24px;
		font-weight: 500;
		margin-right: 4px;
	}

	.box .top-input .input {
		font-size: 24px;
		flex: 1;

	}

	.box .top-input .input input {
		position: relative;
		display: block;
		height: 100%;
		background: 0;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		width: 100%;
		outline: 0;
		border: 0;
		padding: 0;
		margin: 0;
		text-decoration: inherit;
	}

	.box .top-input .max {
		font-size: 14px;
		color: var(--system-color);
	}

	.box .tip {
		font-size: 12px;
		margin-top: 16px;
		padding-top: 12px;
		border-top: 1px solid #dcdfe6;
		color: #999;
	}
</style>